<template>
  <!-- <MousePosition></MousePosition> -->
  <div class="home" v-if="isHome">
    <div class="canvas-container" ref="canvasDom"></div>
    <div class="home-content">
      <div class="home-content-title">
        <h1>汽车展示与选配</h1>
        <!-- <img src="./logo.png" /> -->
        <span class="change-model" @click="onChangeModel">切换model</span>
      </div>
      <h2>选择车身颜色</h2>
      <div class="select">
        <div
          class="select-item"
          v-for="(item, index) in colors"
          :key="index"
          @click="selectColor(index)"
        >
          <div
            class="select-item-color"
            :style="{ backgroundColor: item }"
          ></div>
        </div>
      </div>

      <h2>选择贴膜材质</h2>
      <div class="select">
        <div
          class="select-item"
          v-for="(item, index) in materials"
          :key="index"
          @click="selectMaterial(index)"
        >
          <div class="select-item-text">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="other-home" v-else>
    <LittlestTokyo></LittlestTokyo>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import LittlestTokyo from "./views/LittlestTokyo.vue";
import { GUI } from 'dat.gui';
const gui = new GUI();
//改变交互界面style属性
// gui.domElement.style.right = '0px';
// gui.domElement.style.width = '300px';

let controls;
const canvasDom = ref(null);
const isHome = ref(true);

const scence = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight
);
camera.position.set(0, 2, 6);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// 3D动画渲染函数
const render = () => {
  requestAnimationFrame(() => {
    renderer.render(scence, camera);
    controls && controls.update();
    render();
  });
};

const addLight = () => {
  const lightPos = [
    [0, 0, 10],
    [0, 0, -10],
    [0, 10, 0],
    [0, -10, 0],
    [-10, 0, 0],
    [10, 0, 0],
    [5, 10, 0, 0.3],
    [-5, 10, 0, 0.3],
    [0, 10, 5, 0.3],
    [0, 10, -5, 0.3],
  ];
  for (let [x, y, z, intensity] of lightPos) {
    intensity == undefined ? 1 : intensity;
    const light = new THREE.DirectionalLight(0xffffff, intensity);
    light.position.set(x, y, z);
    scence.add(light);
  }
};

let wheels = [];
let carBody, frontCar, hoodCar, glassCar;
// 创建材质
const bodyMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});

const frontMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});
const hoodMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});
const wheelsMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.1,
});
const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1,
  transparent: true,
});

let colors = ["red", "blue", "green", "gray", "orange", "purple"];
let selectColor = (index) => {
  bodyMaterial.color.set(colors[index]);
  frontMaterial.color.set(colors[index]);
  hoodMaterial.color.set(colors[index]);
  wheelsMaterial.color.set(colors[index]);
  // glassMaterial.color.set(colors[index]);
};
let materials = [
  { name: "磨砂", value: 1 },
  { name: "冰晶", value: 0 },
];
let selectMaterial = (index) => {
  bodyMaterial.clearcoatRoughness = materials[index].value;
  frontMaterial.clearcoatRoughness = materials[index].value;
  hoodMaterial.clearcoatRoughness = materials[index].value;
};

onMounted(() => {
  initListenEvent();
  console.log(canvasDom);
  // 将渲染器插入到dom中
  canvasDom.value.appendChild(renderer.domElement);
  renderer.setClearColor("#000");
  scence.background = new THREE.Color("#ccc");
  scence.environment = new THREE.Color("#ccc");
  render();

  // 添加网格地面
  const gridHelper = new THREE.GridHelper(10, 10);
  gridHelper.opacity = 0.2;
  gridHelper.material.transparent = true;
  scence.add(gridHelper);

  // 添加控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.update();

  // 添加汽车模型
  const loader = new GLTFLoader();
  const dracoloader = new DRACOLoader();
  dracoloader.setDecoderPath("./draco/gltf/");
  loader.setDRACOLoader(dracoloader);
  loader.load("./model/bmw01.glb", (gltf) => {
    const car = gltf.scene;
    // car.position.set(0, 0, 0);
    // car.scale.set(0.01, 0.01, 0.01);
    car.traverse((child) => {
      // 判断是否是轮毂
      if (child.isMesh && child.name.includes("轮毂")) {
        child.material = wheelsMaterial;
        wheels.push(child);
      }
      // 判断是否是车身
      if (child.isMesh && child.name.includes("Mesh002")) {
        carBody = child;
        carBody.material = bodyMaterial;
      }
      // 判断是否是前脸
      if (child.isMesh && child.name.includes("前脸")) {
        child.material = frontMaterial;
        frontCar = child;
      }
      // 判断是否是引擎盖
      if (child.isMesh && child.name.includes("引擎盖_1")) {
        child.material = hoodMaterial;
        hoodCar = child;
      }
      // 判断是否是挡风玻璃
      if (child.isMesh && child.name.includes("挡风玻璃")) {
        child.material = glassMaterial;
        glassCar = child;
      }
    });
    gui.add(car.position, 'z', -50, 50);
    scence.add(car);
  });

  addLight();
});
onUnmounted(()=>{
  removeListenEvent();
})

function initListenEvent() {
  window.addEventListener("resize", onWindowResize, false);
}
function removeListenEvent() {
  window.removeEventListener("resize", onWindowResize, false);
}

function onWindowResize(){
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

const onChangeModel = () => {
  isHome.value = false;
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.home-content {
  position: fixed;
  top: 0;
  right: 20px;
}
.home-content-title {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.change-model {
  margin-left: 8px;
}
.select-item-color {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
}
.select {
  display: flex;
}
.select-item-text {
  margin: 8px;
  font-size: large;
  user-select: none;
  cursor: pointer;
}
</style>
